<template>
  <div>
    <div class="mb-20">
      <router-link to="/goods/topclassAdd">
        <el-button>添加顶级分类</el-button>
      </router-link>
    </div>
    <el-tree :data="tree"
             :props="defaultProps"
             node-key="id"
             :default-expand-all="true"
             :expand-on-click-node="false"
             :render-content="renderContent">
    </el-tree>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import notify from '@/tools/notify'

  export default {
    data () {
      return {
        defaultProps: {
          children: '_child',
          label: 'name'
        }
      }
    },
    computed: {
      ...mapState({
        tree: state => state.goodsclass.goodsTree
      })
    },
    async created () {
      await this.classTree()
    },
    methods: {
      // 获取商品分类树
      async classTree () {
        let payload = {
          id: 0
        }
        await this.$store.dispatch('goodsclass/goodsClassTree', payload)
      },
      renderContent (createElement, {node, data, store}) {
        const self = this
        return createElement('span', {
          attrs: {
            style: 'white-space: normal; width: 100%'
          }
        }, [
          createElement('span', node.label),
          createElement('span', {
            attrs: {
              style: 'float: right; margin-right: 20px'
            }
          }, [
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: function () {
                  self.$store.commit('goodsclass/GOODS_CLASS_SAVE_DATA', data)
                  self.$router.push('/goods/recommendgoodsclass')
                }
              }
            }, '商品分类推荐'),
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: function () {
                  self.$store.commit('goodsclass/GOODS_CLASS_SAVE_DATA', data)
                  self.$router.push('/goods/subclassAdd')
                }
              }
            }, '添加子分类'),
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: function () {
                  if (data.pid === 0) {
                    self.$router.push({name: 'GoodsClassTopEdit', params: {id: data.id}})
                  } else {
                    self.$router.push({name: 'GoodsClassSubEdit', params: {id: data.id}})
                  }
                }
              }
            }, '编辑'),
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: function () {
                  let payload = {
                    id: [data.id],
                    status: 1
                  }
                  self.$store.dispatch('goodsclass/changeStatus', payload).then(res => {
                    self.classTree()
                    notify.success(res.msg)
                  })
                }
              }
            }, '启用'),
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: function () {
                  let payload = {
                    id: [data.id],
                    status: 0
                  }
                  self.$store.dispatch('goodsclass/changeStatus', payload).then(res => {
                    self.classTree()
                    notify.success(res.msg)
                  })
                }
              }
            }, '禁用'),
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: function () {
                  let payload = {
                    id: [data.id]
                  }
                  self.$store.dispatch('goodsclass/goodsClassDel', payload).then(res => {
                    self.classTree()
                    notify.success(res.msg)
                  })
                }
              }
            }, '删除')
          ]),
          createElement('span', {
            attrs: {
              style: 'float: right; margin-right: 30px'
            }
          }, [createElement('span', '已' + data.status_text)])
        ])
      }
    }
  }
</script>
